{include file="layout/layui_header" /}

<!-- 主要内容 -->
<div class="main-content">
    <div class="page-header">
        <h1 class="page-title">权限管理</h1>
        <p class="page-subtitle">管理系统权限和功能控制</p>
    </div>

<style>
.layui-card { 
    margin-bottom: 15px; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.stat-item { 
    text-align: center; 
    padding: 20px; 
}
.stat-value { 
    font-size: 32px; 
    font-weight: bold; 
    color: #01AAED; 
}
.stat-label { 
    margin-top: 8px; 
    color: #666; 
}
.permission-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
}
.permission-title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}
.permission-actions {
    display: flex;
    gap: 8px;
}
.search-form {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    border: 1px solid #e6e8eb;
}
.search-form .layui-form-item {
    margin-bottom: 0;
}
.search-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: end;
}
.search-inline .layui-inline {
    margin: 0;
}
.table-container {
    margin-top: 0;
}
.module-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #f0f0f0;
    border-radius: 3px;
    font-size: 12px;
    color: #666;
}
</style>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <!-- 权限统计概览 -->
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <h3>权限概览</h3>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md3">
                            <div class="stat-item">
                                <div class="stat-value" id="totalPermissions">0</div>
                                <div class="stat-label">总权限数</div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="stat-item">
                                <div class="stat-value" id="menuPermissions">0</div>
                                <div class="stat-label">菜单权限</div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="stat-item">
                                <div class="stat-value" id="operationPermissions">0</div>
                                <div class="stat-label">操作权限</div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="stat-item">
                                <div class="stat-value" id="enabledPermissions">0</div>
                                <div class="stat-label">启用权限</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 权限列表 -->
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="permission-header">
                        <h3 class="permission-title">权限列表</h3>
                        <div class="permission-actions">
                            <button class="layui-btn layui-btn-normal" onclick="addPermission()">
                                <i class="layui-icon layui-icon-add-1"></i> 添加权限
                            </button>
                            <button class="layui-btn layui-btn-primary" onclick="refreshTable()">
                                <i class="layui-icon layui-icon-refresh"></i> 刷新
                            </button>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body">
                    <!-- 搜索表单 -->
                    <div class="search-form">
                        <div class="layui-form">
                            <div class="search-inline">
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width: 70px;">权限名称</label>
                                    <div class="layui-input-inline" style="width: 150px;">
                                        <input type="text" name="searchPermissionName" class="layui-input" placeholder="请输入权限名称">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width: 50px;">模块</label>
                                    <div class="layui-input-inline" style="width: 120px;">
                                        <select name="searchModule">
                                            <option value="">全部模块</option>
                                            <option value="dashboard">仪表板</option>
                                            <option value="park">停车场管理</option>
                                            <option value="vehicle">车辆管理</option>
                                            <option value="payment">缴费管理</option>
                                            <option value="blacklist">黑名单</option>
            
                                            <option value="thirdparty">第三方API</option>
                                            <option value="reports">统计报表</option>
                                            <option value="settings">系统设置</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width: 60px;">菜单权限</label>
                                    <div class="layui-input-inline" style="width: 80px;">
                                        <select name="searchIsMenu">
                                            <option value="">全部</option>
                                            <option value="1">是</option>
                                            <option value="0">否</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width: 50px;">状态</label>
                                    <div class="layui-input-inline" style="width: 80px;">
                                        <select name="searchStatus">
                                            <option value="">全部</option>
                                            <option value="1">启用</option>
                                            <option value="0">禁用</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn" onclick="searchPermissions()">
                                        <i class="layui-icon layui-icon-search"></i> 搜索
                                    </button>
                                    <button class="layui-btn layui-btn-primary" onclick="resetSearch()">
                                        <i class="layui-icon layui-icon-refresh"></i> 重置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 数据表格 -->
                    <div class="table-container">
                        <table class="layui-hide" id="permissionTable" lay-filter="permissionTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<!-- 操作按钮模板 -->
<script type="text/html" id="permissionBarDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>

{include file="layout/layui_footer" /}

<script>
layui.use(['table', 'form', 'layer'], function(){
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;

    // 初始化表格
    table.render({
        elem: '#permissionTable',
        url: '/admin/settings/getPermissionList',
        height: 'full-200',
        page: true,
        loading: true,
        parseData: function(res) {
            // 更新统计数据
            if (res.data && res.data.length > 0) {
                updateStats(res.data, res.count);
            }
            return {
                "code": res.code,
                "msg": res.msg,
                "count": res.count,
                "data": res.data
            };
        },
        cols: [[
            {field: 'permission_name', title: '权限名称', width: 150},
            {field: 'permission_code', title: '权限代码', width: 160},
            {field: 'module', title: '模块', width: 100, templet: function(d){
                return d.module ? '<span class="module-tag">' + d.module + '</span>' : '';
            }},
            {field: 'controller', title: '控制器', width: 120},
            {field: 'action', title: '操作', width: 100},
            {field: 'menu_url', title: '菜单链接', width: 150},
            {field: 'is_menu_text', title: '菜单权限', width: 80},
            {field: 'status', title: '状态', width: 80, templet: function(d){
                return d.status == 1 ? '<span style="color: #5FB878;">启用</span>' : '<span style="color: #FF5722;">禁用</span>';
            }},
            {field: 'sort_order', title: '排序', width: 80},
            {field: 'created_at', title: '创建时间', width: 160},
            {title: '操作', width: 120, toolbar: '#permissionBarDemo'}
        ]]
    });

    // 监听工具条
    table.on('tool(permissionTable)', function(obj){
        var data = obj.data;
        if(obj.event === 'edit'){
            editPermission(data.id);
        } else if(obj.event === 'del'){
            deletePermission(data.id, data.permission_name);
        }
    });

    // 更新统计数据
    function updateStats(data, total) {
        var menu = 0, operation = 0, enabled = 0;
        
        data.forEach(function(permission) {
            if (permission.is_menu == 1) menu++;
            if (permission.is_menu == 0) operation++;
            if (permission.status == 1) enabled++;
        });
        
        $('#totalPermissions').text(total);
        $('#menuPermissions').text(menu);
        $('#operationPermissions').text(operation);
        $('#enabledPermissions').text(enabled);
    }

    // 搜索权限
    window.searchPermissions = function() {
        table.reload('permissionTable', {
            where: {
                permission_name: $('input[name="searchPermissionName"]').val(),
                module: $('select[name="searchModule"]').val(),
                is_menu: $('select[name="searchIsMenu"]').val(),
                status: $('select[name="searchStatus"]').val()
            }
        });
    };

    // 重置搜索
    window.resetSearch = function() {
        $('input[name="searchPermissionName"]').val('');
        $('select[name="searchModule"]').val('');
        $('select[name="searchIsMenu"]').val('');
        $('select[name="searchStatus"]').val('');
        form.render('select');
        table.reload('permissionTable', {
            where: {}
        });
    };

    // 刷新表格
    window.refreshTable = function() {
        table.reload('permissionTable');
    };

    // 添加权限
    window.addPermission = function() {
        showPermissionForm('添加权限', {});
    };

    // 编辑权限
    window.editPermission = function(id) {
        $.get('/admin/settings/getPermissionDetail', {id: id}, function(res) {
            if (res.code === 0) {
                showPermissionForm('编辑权限', res.data);
            } else {
                layer.msg('获取权限信息失败：' + res.msg, {icon: 2});
            }
        });
    };

    // 显示权限表单
    function showPermissionForm(title, permission) {
        var isEdit = permission.id ? true : false;
        var html = '<div style="padding: 20px;">' +
            '<form class="layui-form" lay-filter="permissionForm">' +
            (isEdit ? '<input type="hidden" name="id" value="' + permission.id + '">' : '') +
            '<div class="layui-row">' +
                '<div class="layui-col-md6">' +
                    '<div class="layui-form-item">' +
                        '<label class="layui-form-label">权限名称 <span style="color:red;">*</span></label>' +
                        '<div class="layui-input-block">' +
                            '<input type="text" name="permission_name" lay-verify="required" placeholder="请输入权限名称" class="layui-input" value="' + (permission.permission_name || '') + '">' +
                        '</div>' +
                    '</div>' +
                '</div>' +
                '<div class="layui-col-md6">' +
                    '<div class="layui-form-item">' +
                        '<label class="layui-form-label">权限代码 <span style="color:red;">*</span></label>' +
                        '<div class="layui-input-block">' +
                            '<input type="text" name="permission_code" lay-verify="required" placeholder="请输入权限代码" class="layui-input" value="' + (permission.permission_code || '') + '">' +
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</div>' +
            '<div class="layui-row">' +
                '<div class="layui-col-md6">' +
                    '<div class="layui-form-item">' +
                        '<label class="layui-form-label">所属模块</label>' +
                        '<div class="layui-input-block">' +
                            '<select name="module">' +
                                '<option value="">请选择模块</option>' +
                                '<option value="dashboard" ' + (permission.module == 'dashboard' ? 'selected' : '') + '>仪表板</option>' +
                                '<option value="park" ' + (permission.module == 'park' ? 'selected' : '') + '>停车场管理</option>' +
                                '<option value="vehicle" ' + (permission.module == 'vehicle' ? 'selected' : '') + '>车辆管理</option>' +
                                '<option value="payment" ' + (permission.module == 'payment' ? 'selected' : '') + '>缴费管理</option>' +
                                '<option value="blacklist" ' + (permission.module == 'blacklist' ? 'selected' : '') + '>黑名单</option>' +

                                '<option value="thirdparty" ' + (permission.module == 'thirdparty' ? 'selected' : '') + '>第三方API</option>' +
                                '<option value="reports" ' + (permission.module == 'reports' ? 'selected' : '') + '>统计报表</option>' +
                                '<option value="settings" ' + (permission.module == 'settings' ? 'selected' : '') + '>系统设置</option>' +
                            '</select>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
                '<div class="layui-col-md6">' +
                    '<div class="layui-form-item">' +
                        '<label class="layui-form-label">控制器</label>' +
                        '<div class="layui-input-block">' +
                            '<input type="text" name="controller" placeholder="请输入控制器名称" class="layui-input" value="' + (permission.controller || '') + '">' +
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</div>' +
            '<div class="layui-row">' +
                '<div class="layui-col-md6">' +
                    '<div class="layui-form-item">' +
                        '<label class="layui-form-label">操作方法</label>' +
                        '<div class="layui-input-block">' +
                            '<input type="text" name="action" placeholder="请输入操作方法" class="layui-input" value="' + (permission.action || '') + '">' +
                        '</div>' +
                    '</div>' +
                '</div>' +
                '<div class="layui-col-md6">' +
                    '<div class="layui-form-item">' +
                        '<label class="layui-form-label">菜单图标</label>' +
                        '<div class="layui-input-block">' +
                            '<input type="text" name="menu_icon" placeholder="请输入图标类名" class="layui-input" value="' + (permission.menu_icon || '') + '">' +
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</div>' +
            '<div class="layui-form-item">' +
                '<label class="layui-form-label">菜单链接</label>' +
                '<div class="layui-input-block">' +
                    '<input type="text" name="menu_url" placeholder="请输入菜单链接" class="layui-input" value="' + (permission.menu_url || '') + '">' +
                '</div>' +
            '</div>' +
            '<div class="layui-form-item">' +
                '<label class="layui-form-label">权限描述</label>' +
                '<div class="layui-input-block">' +
                    '<textarea name="description" placeholder="请输入权限描述" class="layui-textarea">' + (permission.description || '') + '</textarea>' +
                '</div>' +
            '</div>' +
            '<div class="layui-row">' +
                '<div class="layui-col-md4">' +
                    '<div class="layui-form-item">' +
                        '<label class="layui-form-label">菜单权限</label>' +
                        '<div class="layui-input-block">' +
                            '<select name="is_menu">' +
                                '<option value="0" ' + (permission.is_menu == 0 ? 'selected' : '') + '>否</option>' +
                                '<option value="1" ' + (permission.is_menu == 1 ? 'selected' : '') + '>是</option>' +
                            '</select>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
                '<div class="layui-col-md4">' +
                    '<div class="layui-form-item">' +
                        '<label class="layui-form-label">状态</label>' +
                        '<div class="layui-input-block">' +
                            '<select name="status">' +
                                '<option value="1" ' + (permission.status == 1 ? 'selected' : '') + '>启用</option>' +
                                '<option value="0" ' + (permission.status == 0 ? 'selected' : '') + '>禁用</option>' +
                            '</select>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
                '<div class="layui-col-md4">' +
                    '<div class="layui-form-item">' +
                        '<label class="layui-form-label">排序</label>' +
                        '<div class="layui-input-block">' +
                            '<input type="number" name="sort_order" placeholder="排序" class="layui-input" value="' + (permission.sort_order || 0) + '">' +
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</div>' +
            '<div class="layui-form-item">' +
                '<div class="layui-input-block">' +
                    '<button type="submit" class="layui-btn" lay-submit lay-filter="submitPermission">保存</button>' +
                    '<button type="reset" class="layui-btn layui-btn-primary">重置</button>' +
                '</div>' +
            '</div>' +
            '</form>' +
            '</div>';

        layer.open({
            type: 1,
            title: title,
            content: html,
            area: ['800px', '700px'],
            success: function(layero, index) {
                form.render();
                
                // 监听表单提交
                form.on('submit(submitPermission)', function(data) {
                    var url = isEdit ? '/admin/settings/editPermission' : '/admin/settings/addPermission';
                    
                    $.post(url, data.field, function(res) {
                        if (res.code === 0) {
                            layer.msg(res.msg, {icon: 1});
                            layer.close(index);
                            table.reload('permissionTable');
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    });
                    
                    return false;
                });
            }
        });
    }

    // 删除权限
    window.deletePermission = function(id, permissionName) {
        layer.confirm('确定要删除权限 "' + permissionName + '" 吗？', function(index) {
            $.post('/admin/settings/deletePermission', {id: id}, function(res) {
                if (res.code === 0) {
                    layer.msg(res.msg, {icon: 1});
                    table.reload('permissionTable');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
                layer.close(index);
            });
        });
    };
});
</script> 